<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>嵌套路由</title>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="../node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
  var Woman = {
    template:`
      <div>
        欢迎女士登录...
      </div>
    `
  }
  var Man = {
    template:`
      <div>
        欢迎男士登录...
      </div>
    `
  }
  /**
   * 1: router-view中包含router-view
   * 2:路由规则中存在子路由
   * */
  var Login = {
    template:`
        <div>
          我是login显示的内容，下面是子路由显示的内容
          <router-view></router-view>
        </div>
    `,
    created:function(){
      console.log(this.$route.query)
    }
  }
  var Register = {
    template:`
      <div>
        <router-view></router-view>
      </div>
    `,
    created:function(){
      console.log(this.$route.params)
    }
  }

  Vue.use(VueRouter);

  var router = new VueRouter({
    routes:[
      {
        //保证 /login显示login组件
        name:'login',path:'/login',component:Login,
        //保证 /login/abc 显示abc
        children:[
          {
            name:"login.woman",
            path:'woman',
            component:Woman
          },
          {
            name:"login.man",
            path:'man',
            component:Man
          },
        ]
      },
      { name:'register',path:'/register/:name',component:Register }
    ]
  });

  var App = {
    template:`
        <div>
           <router-link :to="{name:'login.woman'}">去女士登录页面</router-link>
           <router-link :to="{name:'login.man'}">去男士登录页面</router-link>
           <router-view></router-view>
        </div>
      `
  };

  new Vue({
    el:'#app',
    router:router, //不加会导致运行时报matched of undefined
    components:{
      app:App
    },
    template:'<app/>'
  });

</script>
</body>
</html>

